"use client";

import { useSidebar } from "@/context/SidebarContext";
import { ToastProvider } from "@/context/ToastContext";
import AppHeader from "@/layout/AppHeader";
import AppSidebar from "@/layout/AppSidebar";
import Backdrop from "@/layout/Backdrop";
import ToastContainer from "@/components/ui/toast/ToastContainer";
import React from "react";

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isExpanded, isHovered, isMobileOpen } = useSidebar();

  // Fixed position for main content regardless of sidebar state
  const mainContentMargin = "ml-0";

  return (
    <ToastProvider>
    <div className="min-h-screen xl:flex bg-gray-50 dark:bg-zinc-900">
      {/* Sidebar and Backdrop */}
      <AppSidebar />
      <Backdrop />
      {/* Main Content Area */}
      <div
        className={`flex-1 transition-all duration-300 ease-in-out ${mainContentMargin} ${isExpanded ? 'lg:pl-[240px]' : 'lg:pl-[90px]'}`}
      >
        {/* Header */}
        <AppHeader />
        {/* Page Content */}
        <div className="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">{children}</div>
      </div>
        {/* Toast Container */}
        <ToastContainer />
    </div>
    </ToastProvider>
  );
}
